import React from 'react'
// import Item from '../../../src copy/components/List/Item';
import './index.css'

export default function Footer({ todoList, setTodoList }) {
  //1.全部后面的值跟todoList的长度一致,设置一个变量,todoList.length就是这个值
  //2.已完成的值跟todoList的done为true的个数一致,用累加
  const numHandle = () => {
    // const  a=  todoList.reduce((p,c)=>{
    //   if(c.done === true){
    //     return p+1
    //   }else if(c.done === false ){
    //     return p
    //   }
    // },0)
    // return a
    //简化写法
    return todoList.reduce((p, c) => c.done ? p + 1 : p, 0)
  }
  // console.log(numHandle());

  //全选逻辑
  const AllCheckedHandle = (e) => {
    console.log(e.target.checked);
    const newTodo = todoList.map(item => {
      // item.done = e.target.checked
      // return item
      return { ...item, done: e.target.checked }
    })
    setTodoList(newTodo)
  }


  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" onChange={AllCheckedHandle} />
      </label>
      <span>
        <span>已完成{numHandle()}</span> / 全部{todoList.length}
      </span>
      <button className="btn btn-danger">清除已完成任务</button>
    </div>
  )
}
